<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线代码编辑器</title>
    <style>
        ::-webkit-scrollbar {
            background: rgba(255, 255, 255, 0);
            width: 8px;
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(115, 112, 112, 0.11);
        }

        body {
            display: flex;
            justify-content: space-around;
            padding-top: 20px;
            background: rgba(255, 255, 255, 0);
        }

        textarea, iframe {
            width: 48%;
            height: 400px;
            border: 1px solid #ddd;
            border-radius: 4px;
            background: rgba(255, 255, 255, 0);
        }
    </style>
</head>
<body>

<textarea id="code" placeholder="在这里写代码..."></textarea>
<iframe id="preview" title="代码预览"></iframe>

<script>
    const codeArea = document.getElementById('code');
    const previewFrame = document.getElementById('preview');

    codeArea.addEventListener('keyup', function () {
        const htmlContent = codeArea.value;
        const frameDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;
        frameDoc.open();
        frameDoc.write(htmlContent);
        frameDoc.close();
    });
</script>

</body>
</html>